<template>
	<view>
		<u-navbar
			title="我的团队"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="leftClick"
			:autoBack="false"
		>
		</u-navbar>
		
		<view style="padding: 20px 0px 0px 0px ;min-height: 300px;margin-top: 60px;">
			<view class="title">我的团队</view>
			<u-grid
					:border="false"
					col="1"
			>
				<u-grid-item
						v-for="i in teamList"
						:key="i.teamId"
				>
					<view class="item" @click="goTeamDetail(i.teamId)">
						<u-row>
							<u-col span="4">
								<view style="padding: 10px;">
									<view class="itemTeamBk" :style="{backgroundImage: 'url(' + i.avatar + ')'}">
									</view>
								</view>
							</u-col>
							<u-col span="8">
								<view>
									<view class="line1" style="font-weight: 600;font-size: 16px;margin-bottom: 14px;">{{i.teamName}}</view>
									<view class="line1" style="font-weight: 300;font-size: 14px">{{i.aim}}</view>
								</view>
							</u-col>
						</u-row>
						
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
import { getMyTeamByUserIdApi, getTeamByUserIdApi } from '../../../utils/team';
	
	export default{
		data(){
			return {
				myTeamList:[],
				teamList: [],
				userId: undefined,
			}
		},
		methods:{
			leftClick(){
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/view/homepage/homepage'    
					})   
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			goTeamDetail(id){
				uni.navigateTo({
					url:`/pages/view/team/teamDetail?id=${id}`
				})
			}
		},
		onLoad: function(option) {
			this.userId = option.id
			let that = this
			getMyTeamByUserIdApi(this.userId).then(res => {
				if(res.code == 0){
					console.log(res)
					that.myTeamList = res.data
				}
			})
			getTeamByUserIdApi(that.userId).then(res=> {
				if(res.code == 0){
					console.log(res)
					that.teamList = res.data
				}
			})
		}
	}
</script>

<style scoped>
	.item{
		width: 100%;margin: 0 auto;width: 87%;margin-bottom: 20px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
		border-radius: 7px;
	}
	.itemTeamBk{
		width: 70px;
		height: 70px;
		border-radius: 7px;
		background-size: 100% 100%;
	}
	.line1{
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
	}
	.line2{
		display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
	}
	.title{
		font-weight: bold;
		font-size: 37rpx;
		margin-left: 25px;
		margin-bottom: 20px;
	}
</style>